<template>
    <div class="about">
        <el-button size="mini" type="danger" @click="Del(id.toString())">批量删除</el-button>
        <el-form :inline="true"  class="demo-form-inline">
            <el-form-item label="用户名">
                <el-input v-model="nm" placeholder="请输入用户名称或账号"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="Show()">查询</el-button>
            </el-form-item>
        </el-form>
        <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55"> </el-table-column>
            <el-table-column prop="pName" label="用户名" width="180"> </el-table-column>
            <el-table-column prop="roles.rName" label="角色" width="180"> </el-table-column>
            <el-table-column prop="age" label="年龄" width="180"> </el-table-column>
            <el-table-column prop="trem" label="学习证书" width="180"> </el-table-column>
            <el-table-column prop="cred" label="宗教信仰" width="180"> </el-table-column>
            <el-table-column prop="phone" label="手机号" width="180"> </el-table-column>
            <el-table-column fixed="right" label="操作" width="180">
                <template>
                    <el-button type="text" size="small">删除</el-button>
                    <el-button type="text" size="small">编辑</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="block">
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="Pindex"
                :page-sizes="[1, 2, 3, 4]"
                :page-size="Psize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="PCount"
            >
            </el-pagination>
        </div>
    </div>
</template>
<script>
import { Shows, Del } from '@/api/users';
export default {
    data() {
        return {
            tableData: [],
            multipleSelection: [],
            id: [],
            Pindex: 1,
            Psize: 2,
            PCount: 0,
            nm: ''
        };
    },
    mounted() {
        this.Show();
    },
    methods: {
        handleSelectionChange(val) {
            this.multipleSelection = val;
            this.id = this.multipleSelection.map((x) => x.pId);
            console.log(this.id);
        },
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
            this.Psize = val;
            this.Show();
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.Pindex = val;
            this.Show();
        },
        Show() {
            Shows(this.nm, this.Pindex, this.Psize).then((d) => {
                this.tableData = d.data.pList;
                this.PCount = d.data.pCount;
            });
        },
        Del(row) {
            if (confirm('确认删除吗?')) {
                if (this.multipleSelection.length == 0) {
                    alert('至少选择一项');
                    return;
                }
                Del(row).then((d) => {
                    if (d.data > 0) {
                        alert('删除成功!');
                        this.Show();
                    } else {
                        alert('删除失败!');
                    }
                });
            }
        }
    }
};
</script>
